<template>
    <el-container class="hi_print_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :is-search="false"
                                :toolbar_buttons="toolbar_buttons" />
                <hi-print-design type="custom" ref="$design"
                                 :design-id="designId" />
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import HiPrintDesign from "@common/components/hiprint/design";
import { hiprint } from '@common/plugins/hiprint';
import CustomProvider from "@common/plugins/hiprint/etypes/custom-provider";

export default {
    name: "index",
    components: { HiPrintDesign },
    data() {
        const _this = this;
        return {
            toolbar_buttons: [
                {
                    id: "delete",
                    icon: "el-icon-refresh",
                    label: '重置',
                    show: true,
                    method: () => {
                        _this.initDesign();
                    },
                },
                {
                    id: "delete",
                    icon: "el-icon-check",
                    type: 'primary',
                    label: '保存',
                    show: true,
                    method: () => {
                        _this.saveDesign();
                    },
                },
            ],
            templateData: {},
            designItemList: [],
        };
    },
    computed: {
        designId() {
            return this.$route.query.sid;
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            const _this = this;
            if (!_this.$utils.isNotEmpty(_this.$route.query.sid)) {
                return;
            }
            await _this.initTemplate();
            await _this.initDesignItem();
            this.$nextTick(() => {
                _this.initDesign();
            });
        },
        initTemplate() {
            const _this = this;
            return _this.fetchData(_this.$api.API_GetBasePrintDesignBySid, {
                sid: _this.$route.query.sid,
            }).then(result => {
                _this.templateData = result.data || {};
            }).catch(() => {
            });
        },
        initDesignItem() {
            const _this = this;
            return _this.fetchData(_this.$api.API_QueryBasePrintDesignItem4Design, {
                type: _this.templateData.type,
            }).then(result => {
                _this.designItemList = result.data || [];
            }).catch(() => {
            });
        },
        initDesign() {
            const _this = this;
            let template = [];
            if (_this.$utils.isNotEmpty(_this.templateData.template_json)) {
                template = JSON.parse(_this.templateData.template_json);
            }
            let newHiprint = $.extend({}, hiprint);
            const provider = CustomProvider(newHiprint, _this.templateData.type, _this.designItemList);
            if (this.$refs.$design) {
                this.$refs.$design.initConfig(newHiprint, {
                    designId: _this.designId,
                    module: _this.templateData.type,
                    template,
                    providers: [ new provider() ],
                });
            }
        },
        saveDesign() {
            const _this = this;
            let subData = $.extend({}, _this.templateData);
            let json = {};
            if (_this.$refs.$design) {
                json = _this.$refs.$design.getTemplateJson();
            }
            subData.template_json = JSON.stringify(json);
            _this.templateData = $.extend({}, _this.templateData, {
                template_json: subData.template_json,
            });
            return _this.fetchData(_this.$api.API_SaveBasePrintDesign, subData).then(() => {
                _this.$message.success('保存成功！');
                _this.initTemplate();
            }).catch(() => {
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.hi_print_container {
    width: 100%;
    height: 100%;
    overflow: hidden;


    /deep/ .el-card__body {
        width: 100%;
        height: calc(100% - 45px);
    }
}
</style>
